<template>
	<view>
		<view class="shade-bg" :class="bg_src?'':'moyi-bg-a'" :style="'background-image: url('+bg_src+');background-size:100%;'">
		</view>
		<view class="shade-bg moyi-bg-a" style="z-index: -2;" v-if="bg_src">
			<video 
			:controls="false"
			:autoplay="true"
			:loop="true"
			:show-center-play-btn="false"
			:src="bg_src"
			:show-play-btn="false" 
			object-fit="fill"
			style="width: 750rpx;height: 100%;z-index: -9;"></video>
		</view>
		<view @tap="skip()" style="position: fixed;margin-top: 50rpx;bottom: 50rpx; right: 0; z-index: 1;" class="text-center padding text-white">
			<view class="padding-sm round" style="background-color:rgba(0,0,0,0.6);width: 140rpx;" >
				<text >跳过{{time?time:''}}</text>
			</view>
		</view>
		<view style="width: 750rpx; position: fixed;margin-top: 250rpx;" class="text-center padding text-white">
			<view style="transform-style:preserve-3d;">
				<image 
				src=""
				 mode="aspectFill" style="width: 200rpx;height: 200rpx;"
				 class="test2-admin">
					<view style="top: -65rpx;right: 200rpx;position: fixed ;transform:rotateX(75deg) rotateY(-45deg);color: #D2F1F0;">
						<view class="test-admin">
							<text class="cuIcon-loading1 text-bold" style="font-size: 300rpx;"></text>
						</view>
					</view>
					<view style="top: -65rpx;right: 200rpx;position: fixed ;transform:rotateX(75deg) rotateY(-45deg);color: #D2F1F0;">
						<view class="test1-admin">
							<text class="cuIcon-loading1 text-bold" style="font-size: 300rpx;"></text>
						</view>
					</view>
					
			</view>
			<view class="margin-xl"><text>{{base.title}}</text></view>
		</view>
		<view class="text-center moyi-te-a" style="position: fixed; bottom: 0;width: 750rpx;">
			<view class="padding-xl " >
				<text class="">{{tips}}</text>
				<!-- <input ="" /> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base:{
					title:this.$config.title
				},
				tips:'',
				bg_src:'',
				// bg_src:'',
				// bg_src:'https://moyioss.oss-cn-shanghai.aliyuncs.com/uploads/20200406/aa3eb9ca1fd12df185cdbc0211ade075.jpg',

				time:5,
				code:-1,
				timeStop:false
			};
		},
		methods: {
			skip(){
				this.timeStop = true
				if(this.code == 1){
					uni.reLaunch({
						url: this.$db.get('default_page',true,'/pages/app/indexs')
					})
				}else{
					uni.reLaunch({
						url:'/pages/user/login'
					})
				}
			},
			startTime() {
				if(this.timeStop){
					return
				}
				setTimeout(() => {
					if(this.time -- > 1){
						this.startTime();
					}else{
						this.skip();
					}
				}, 1000);
			},
			init_db(){
				this.tips = this.$db.get('init_tips',true,'这是一个demo仅供ui展示');
				// this.default_page = this.$db.get('default_page',true,'/pages/app/indexs');
				this.bg_src = this.$db.get('init_bg',true,'');
			},
			init(){
				console.log('开始初始化');
				this.$api.init({},(res)=>{
					if(res.code){
						res.data.db.forEach((db)=>{
							this.$db.set(db.key,db.value)
						})
						this.init_db();
					}
				});
				this.$api.refreshUser({},(res)=>{
					this.code = res.code;
					if (res.code) {
						console.log('用户正常')
						this.$common.saveUserInfo(res.data);
					}else{
						// 删除用户
						console.log('用户刷新失败')
						this.$db.del('userInfo');
					}
				});
			}
		},
		created() {
			this.startTime();
		},
		onLoad() {
			this.init_db();
			this.init();
		},
		onShow() {},
		computed: {}
	};
</script>

<style lang="less">
	.page {
		width: 100%;
		height: 100%;
		position: absolute;
		background-position: top;
	}

	.cu-logo {
		width: 80rpx;
		height: 80rpx;
	}

	.slogo {
		width: 750rpx;
		bottom: 0;
		position: absolute;
	}

	.slogo-img {
		width: 750rpx;
	}

	.test-admin {
		animation: test infinite 2.75s linear;
	}
	.test1-admin {
		animation: test1 infinite 2.75s linear;
		animation-delay:  1.35s;
	}
	.test2-admin {

		animation: test2 infinite 1.75s linear;
	}

	@keyframes test {
		0% {
			transform: rotate(0deg);
			color: #fff;
		}
		50% {
			color: #ffd250;
		}
		100% {
			transform: rotate(365deg);
			color: #fff;
		}
	}
	@keyframes test1 {
		0% {
			transform: rotate(0deg);
			color: #fff;
		}
		50% {
			color: #25272c;
		}
		100% {
			transform: rotate(365deg);
			color: #fff;
		}
	}
	
	@keyframes test2 {
		0% {
			// filter: red;
			transform: scale(.96);
		}
		50% {
			transform: scale(1);
			filter:brightness(120%);
		}
		100% {
			transform: scale(.96);
			// filter: hue-rotate（0deg);
		}
	}
</style>
